<template>
  <div class="graph-top">
    <span style="font-size: 18px;">
      算法设计与分析
    </span>
  </div>
  <div>
    <div style="border: #efefef solid 1px; height: calc(100vh - 100px);width: 100%;">
      <RelationGraph ref="relationGraph$" :options="options" :on-node-click="onNodeClick" @node-expand="onNodeExpand" @node-collapse="onNodeCollapse">
        <template #node="{node}">
          <div style="padding-top:20px;">
            {{node.text}}
          </div>
        </template>
      </RelationGraph>
    </div>
  </div>
  <div style="display: flex; justify-content: center;">
    <Sidebar />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import RelationGraph, {RGJsonData, RGNode, RGUserEvent} from 'relation-graph-vue3'
import router from '@/router'
import Sidebar from '@/components/Sidebar.vue'
const relationGraph$ = ref<RelationGraph>()
const options = {
  defaultExpandHolderPosition: 'right',
  // defaultLineShape: 4,
}
const onNodeClick = (node:RGNode, e: RGUserEvent) => {
  console.log('onNodeClick:', node.id);
  router.push('/N14')
  return true;
}
onMounted(async () => {
  const graphJsonData:RGJsonData = {
    rootId: 'N0',
    nodes: [
      { id: 'N0', text: '算法设计与分析' },
      { id: 'N1', text: '第一章 算法概述', color: '#ff8c00' },
      { id: 'N2', text: '第二章 递归与分治策略', color: '#ffd700' },
      { id: 'N3', text: '第三章 动态规划' },
      { id: 'N4', text: '第四章 贪心算法' },
      { id: 'N5', text: '第五章 回溯法' },
      { id: 'N6', text: '第六章 分支限界法' },
      { id: 'N7', text: '第七章 随机化算法' },
      { id: 'N8', text: '第八章 线性规划与网络流' },
      { id: 'N9', text: '第九章 串与序列的算法' },

      { id: 'N10', text: '1.1 算法与程序', color: '#ff8c00' },
      { id: 'N11', text: '1.2 算法复杂度分析', color: '#ff8c00' },
      { id: 'N12', text: '1.3 NP完全性理论', color: '#ff8c00' },

      { id: 'N13', text: '2.1 递归的概念', color: '#ff8c00' },
      { id: 'N14', text: '2.2 分治法的基本思想' },
      { id: 'N15', text: '2.3 二分搜索技术' },
      { id: 'N16', text: '2.4 大整数的乘法' },
      { id: 'N17', text: '2.5 Strassen矩阵乘法' },
      { id: 'N18', text: '2.6 棋盘覆盖' },
      { id: 'N19', text: '2.7 合并排序' },
      { id: 'N20', text: '2.8 快速排序' },
      { id: 'N21', text: '2.9 线性时间选择' },
      { id: 'N22', text: '2.10 最接近点对问题' },
      { id: 'N23', text: '2.11 循环赛日程表' },

      { id: 'N24', text: '3.1 矩阵连乘问题' },
      { id: 'N25', text: '3.2 动态规划算法的基本要素' },
      { id: 'N26', text: '3.3 最长公共子序列' },
      { id: 'N27', text: '3.4 最大子段和' },
      { id: 'N28', text: '3.5 凸多边形最优三角剖分' },
      { id: 'N29', text: '3.6 多边形游戏' },
      { id: 'N30', text: '3.7 图像压缩' },
      { id: 'N31', text: '3.8 电路布线' },
      { id: 'N32', text: '3.9 流水作业调度' },
      { id: 'N33', text: '3.10 0-1背包问题' },
      { id: 'N34', text: '3.11 最优二叉搜索树' },

      { id: 'N35', text: '4.1 活动安排问题' },
      { id: 'N36', text: '4.2 贪心算法的基本要素' },
      { id: 'N37', text: '4.3 最优装载' },
      { id: 'N38', text: '4.4 哈夫曼编码' },
      { id: 'N39', text: '4.5 单元最短路径' },
      { id: 'N40', text: '4.6 最小生成树' },
      { id: 'N41', text: '4.7 多机调度问题' },

      { id: 'N42', text: '5.1 回溯法的算法框架' },
      { id: 'N43', text: '5.2 装载问题' },
      { id: 'N44', text: '5.3 批处理作业调度' },
      { id: 'N45', text: '5.4 符号三角形问题' },
      { id: 'N46', text: '5.5 0-1背包问题' },
      { id: 'N47', text: '5.6 最大闭包问题' },
      { id: 'N48', text: '5.7 最大团问题' },
      { id: 'N49', text: '5.8 图的m着色问题' },
      { id: 'N50', text: '5.9 旅行售货员问题' },
      { id: 'N51', text: '5.10 圆排列问题' },
      { id: 'N52', text: '5.11 电路板排列问题' },
      { id: 'N53', text: '5.12 连续邮资问题' },
      { id: 'N54', text: '5.13 回溯法的效率分析' },

      { id: 'N55', text: '6.1 分支限界法的基本思想' },
      { id: 'N56', text: '6.2 单元最短路径问题' },
      { id: 'N57', text: '6.3 装载问题' },
      { id: 'N58', text: '6.4 布线问题' },
      { id: 'N59', text: '6.5 0-1背包问题' },
      { id: 'N60', text: '6.6 最大团问题'},
      { id: 'N61', text: '6.7 旅行售货员问题' },
      { id: 'N62', text: '6.8 电路板排列问题' },
      { id: 'N63', text: '6.9 批处理作业调度问题' },

      { id: 'N64', text: '7.1 随机数' },
      { id: 'N65', text: '7.2 数值随机化算法' },
      { id: 'N66', text: '7.3 舍伍德算法' },
      { id: 'N67', text: '7.4 拉斯维加斯算法' },
      { id: 'N68', text: '7.5 蒙特卡罗算法' },

      { id: 'N69', text: '8.1 线性规划问题和单纯形算法' },
      { id: 'N70', text: '8.2 最大网络流问题' },
      { id: 'N71', text: '8.3 最小费用流问题' },

      { id: 'N72', text: '9.1 子串搜索算法' },
      { id: 'N73', text: '9.2 后缀数组与最长公共子串' },
      { id: 'N74', text: '9.3 序列比较算法' },
    ],
    lines: [
      { from: 'N0', to: 'N1', text: ''},
      { from: 'N0', to: 'N2', text: ''},
      { from: 'N0', to: 'N3', text: ''},
      { from: 'N0', to: 'N4', text: ''},
      { from: 'N0', to: 'N5', text: ''},
      { from: 'N0', to: 'N6', text: ''},
      { from: 'N0', to: 'N7', text: ''},
      { from: 'N0', to: 'N8', text: ''},
      { from: 'N0', to: 'N9', text: ''},

      { from: 'N1', to: 'N10', text: ''},
      { from: 'N1', to: 'N11', text: ''},
      { from: 'N1', to: 'N12', text: ''},

      { from: 'N2', to: 'N13', text: ''},
      { from: 'N2', to: 'N14', text: ''},
      { from: 'N2', to: 'N15', text: ''},
      { from: 'N2', to: 'N16', text: ''},
      { from: 'N2', to: 'N17', text: ''},
      { from: 'N2', to: 'N18', text: ''},
      { from: 'N2', to: 'N19', text: ''},
      { from: 'N2', to: 'N20', text: ''},
      { from: 'N2', to: 'N21', text: ''},
      { from: 'N2', to: 'N22', text: ''},
      { from: 'N2', to: 'N23', text: ''},

      { from: 'N3', to: 'N24', text: ''},
      { from: 'N3', to: 'N25', text: ''},
      { from: 'N3', to: 'N26', text: ''},
      { from: 'N3', to: 'N27', text: ''},
      { from: 'N3', to: 'N28', text: ''},
      { from: 'N3', to: 'N29', text: ''},
      { from: 'N3', to: 'N30', text: ''},
      { from: 'N3', to: 'N31', text: ''},
      { from: 'N3', to: 'N32', text: ''},
      { from: 'N3', to: 'N33', text: ''},
      { from: 'N3', to: 'N34', text: ''},

      { from: 'N4', to: 'N35', text: ''},
      { from: 'N4', to: 'N36', text: ''},
      { from: 'N4', to: 'N37', text: ''},
      { from: 'N4', to: 'N38', text: ''},
      { from: 'N4', to: 'N39', text: ''},
      { from: 'N4', to: 'N40', text: ''},
      { from: 'N4', to: 'N41', text: ''},

      { from: 'N5', to: 'N42', text: ''},
      { from: 'N5', to: 'N43', text: ''},
      { from: 'N5', to: 'N44', text: ''},
      { from: 'N5', to: 'N45', text: ''},
      { from: 'N5', to: 'N46', text: ''},
      { from: 'N5', to: 'N47', text: ''},
      { from: 'N5', to: 'N48', text: ''},
      { from: 'N5', to: 'N49', text: ''},
      { from: 'N5', to: 'N50', text: ''},
      { from: 'N5', to: 'N51', text: ''},
      { from: 'N5', to: 'N52', text: ''},
      { from: 'N5', to: 'N53', text: ''},
      { from: 'N5', to: 'N54', text: ''},

      { from: 'N6', to: 'N55', text: ''},
      { from: 'N6', to: 'N56', text: ''},
      { from: 'N6', to: 'N57', text: ''},
      { from: 'N6', to: 'N58', text: ''},
      { from: 'N6', to: 'N59', text: ''},
      { from: 'N6', to: 'N60', text: ''},
      { from: 'N6', to: 'N61', text: ''},
      { from: 'N6', to: 'N62', text: ''},
      { from: 'N6', to: 'N63', text: ''},

      { from: 'N7', to: 'N64', text: ''},
      { from: 'N7', to: 'N65', text: ''},
      { from: 'N7', to: 'N66', text: ''},
      { from: 'N7', to: 'N67', text: ''},
      { from: 'N7', to: 'N68', text: ''},

      { from: 'N8', to: 'N69', text: ''},
      { from: 'N8', to: 'N70', text: ''},
      { from: 'N8', to: 'N71', text: ''},

      { from: 'N9', to: 'N72', text: ''},
      { from: 'N9', to: 'N73', text: ''},
      { from: 'N9', to: 'N74', text: ''},
    ],
  };

  const graphInstance = relationGraph$.value!.getInstance();
  await graphInstance.setJsonData(graphJsonData);
  const level_1_nodes = graphInstance.getNodeById(graphJsonData.rootId).lot.childs;
  level_1_nodes.forEach(thisLevel1Node => {
    thisLevel1Node.expanded = false;
  });
  await relationGraph$.value!.refresh();
})

const onNodeCollapse = (node: RGNode, $event: RGUserEvent) => {
  console.log('onNodeCollapse:', node);
  relationGraph$.value!.getInstance().doLayout();
};

const onNodeExpand = (node: RGNode, $event: RGUserEvent) => {
  console.log('onNodeExpand:', node);
  relationGraph$.value!.getInstance().doLayout();
};

</script>

<style>

.graph-top {
  display: flex;
  height: 5%;
  align-items: center;
  justify-content: center;
}
</style>
